<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>阿文vue学习</title>
		<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
	</head>
	<body>
		<div id="app">
		  <select v-model="selected" name="fruit">
		    <option value="">选择一个网站</option>
		    <option value="www.runoob.com">Runoob</option>
		    <option value="www.google.com">Google</option>
		  </select>
		 
		  <div id="output">
		      选择的网站是: {{selected}}
		  </div>
		  <h3>文本</h3>
		  <div>
			  <input v-model="message" placeholder="edit me">
			  <p>Message is: {{ message }}</p>
		  </div>
		  
		  <h3>多行文本</h3>
		  <div>
			<span>Multiline message is:</span>
			<p>{{ messagem }}</p>
			<textarea v-model="messagem" placeholder="add multiple lines"></textarea>
		  </div>
		  
		  <h3>复选框</h3>
		  <div>
			  <input type="checkbox" id="checkbox" v-model="checked">
			  <label for="checkbox">{{ checked }}</label>
			  <br />
			  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
			  <label for="jack">Jack</label>
			  <input type="checkbox" id="john" value="John" v-model="checkedNames">
			  <label for="john">John</label>
			  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
			  <label for="mike">Mike</label>
			  <br>
			  <span>Checked names: {{ checkedNames }}</span>
		  </div>
		  
		  
		</div>
		 
		<script>
		new Vue({
		  el: '#app',
		  data: {
		    selected: '' ,
			message:'',
			messagem:'',
			checked:true,
			checkedNames:[],
		  }
		})
		</script>
	</body>
</html>
